<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img{
            width: 150px;
            height: 150px;
        }
    </style>
    <script>
        // 节点属性
        // nodeName节点名称
        // nodeValue节点值
        // nodeType节点类型
            // 元素 --1
            //属性--2
            //文本--3
            //注释--4
            //文档--5
        
        // 设置或者修改节点的属性
        // getAttribute()获取当前的元素属性
        // setAttribute()给当前元素节点进行设置属性样式
    </script>
</head>
<body>
    <ul id="nodeList"><li>nodeName</li><li>nodeValue</li><li>nodeType</li></ul>
    <script>
        let nodes = document.getElementById("nodeList");
        let type1 = nodes.firstElementChild.nodeType;
        let type2 = nodes.firstElementChild.lastElementChild;
        let name1 = nodes.firstElementChild.nodeName
        let value1 = nodes.firstElementChild.nodeValue


        console.log(type1);
        console.log(name1);
        console.log(value1);
    </script>

    <p>选择你喜欢的物品
        <input type="radio" name="mouse" onclick="mouse()">罗技鼠标
        <input type="radio" name="mouse" onclick="mouse()">雷蛇鼠标
    </p>
    <div><img src="" alt="" id="images" onclick="img()"><span></span></div>

    <script>
        function mouse(){
            let ele = document.getElementsByName("mouse");
            let img = document.getElementById("images");
            if(ele[0].checked){
                console.log('罗技');
                img.setAttribute("src","./img/gj.jpg");
                img.setAttribute("alt","雷蛇鼠标")
                img.nextElementSibling.innerHTML="aaa"
            }else{
                console.log('雷蛇');
                img.setAttribute("src","./img/ls.jpg")
                 img.nextElementSibling.innerHTML="bbbb"
            }
        }
        function img(){
            let alt = document.getElementById("images").getAttribute("src");
            alert(alt)
        }

    </script>

    
</body>
</html>